<template>
  <div class="student-swiper">
    <h3>学员管理</h3>
    <!-- search -->
    <Search @searchparent="searchparent" />
    <!-- main -->
    <Main :arr="arr" @resetparentFun="getData" @openDialog="parentDialog" />
    <!-- :arr 把数据传给子组件   @resetparentFun 父子通信  @openDialog 接收子组件传递来的方法-->
    <!-- footer -->
    <Footer :total="total"/>
    <!-- Dialog -->
    <Dialog v-if="isShow" :row="row" />
    <!--  v-if="isShow" 控制弹框是否显示-->
  </div>
</template>
<script>
import Search from "./components/Search.vue"; //引入组件
import Main from "./components/Main.vue";
import Footer from "./components/Footer.vue";
import Dialog from "./components/Dialog.vue";
import { getStudent } from "../../api/student"; //引用api接口里面的函数
export default {
  components: {
    Search,
    Main,
    Footer,
    Dialog,
  },
  data() {
    return {
      arr: [], //保存数据
      input: "",
      isShow: false, //弹框默认不显示
      row: {},
      page:1,
      pageSize:10,
      total:0,
      startTime:'',
      endTime:'',
      // tableData: [{
      //  id:'01',
      //  name:'小王',
      //  phone:'13245670987',
      //  pay:'￥3456',
      //  num:'10',
      //  vip:'3',
      //  lastTime:'2020.10.22 10:22',
      // }],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      const params = {
         input: this.input,
         startTime:this.startTime, //开始时间
         endTime:this.endTime, //结束时间
         page:this.page, //页码 默认第一页
         pageSize:this.pageSize //每个页面条数
          }
      getStudent(params).then((res) => {
        //调用接口api里面的函数
        // console.log(new Date(et)=='Invalid Date',new Date(st));
        console.log(res);
        if (res.code == 200) {
          this.arr = res.data; //把造的数据传入arr
          this.total = res.total //把后台的数据个数传递给前端
        }
      });
    },
    searchparent(val,startTime,endTime) {
      this.input = val;
      this.startTime=startTime;
      this.endTime=endTime;
      this.getData();
    },
    parentDialog(val) {
      //父组件的方法  控制弹框是否显示
      this.isShow = true;
      this.row = val;
      console.log(val);
    },
  },
};
</script>
<style lang="less" scoped>
.student-swiper {
  width: 1220px;
  height: 100%;
  padding: 20px;
  margin: auto;
  h3 {
    font-size: 20px;
    color: #333;
    padding: 0 14px;
    border-left: 8px solid #438afe;
    margin-bottom: 20px;
  }
}
</style>
